<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>确认订单</title>
    <link rel="stylesheet" href="../public/css/3.css">
    <link rel="stylesheet" href="../public/css/reset.css" />
    <link rel="stylesheet" href="../public/css/all_use.css" />
    <link rel="stylesheet" href="../public/css/footer.css">
    <script src="../public/js/utils/utils.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <div style="height: 1px;"></div>
        <div class="shouhuo">
            <div style="width: 20%;margin-left: 23px;">
                <img src="../public/img/dw.png" alt="">
            </div>
            <div class="adress_box">
                <div v-if="datalist != null">
                    <div style="margin-bottom: 10px;color: #333333; ">{{datalist.username}}<span
                            style="color: #999;">{{datalist.tel}}</span></div>
                    <div style="color: #333333;">{{datalist.site}}</div>
                </div>
                <div v-if="datalist == null">请编辑收货地址</div>
                <div>
                    <img src="../public/img/xgdz.png" @click="router()">
                </div>
                <van-dialog v-model="show" title="确认收货信息" show-cancel-button="true" confirm-button-text="确认"
                confirm-button-color="#11BD10" @confirm="zf">
                <div class="czh">
                    <div class="czhm">收货人</div>
                    <input placeholder="请输入收货人"
                    style="width: 80%;height: 40px;border:none;outline:medium;background-color:#E9E9E9;border-radius: 10px;"
                    v-model="username">
                </div>
                <div class="czh">
                    <div class="czhm">手机号码</div>
                    <input placeholder="请输入手机号码"
                    style="width: 80%;height: 40px;border:none;outline:medium;background-color:#E9E9E9;border-radius: 10px;"
                    maxlength="11" v-model="tel">
                </div>
                <div class="czh">
                    <div class="czhm">收货地址</div>
                    <input placeholder="请输入收货地址"
                    style="width: 80%;height: 40px;border:none;outline:medium;background-color:#E9E9E9;border-radius: 10px;"
                    v-model="site">
                </div>
            </van-dialog>
            </div>
        </div>
        <div class="spk">
            <div style="margin-left: 23px;">
                <img :src="imgList[0]" class="tp3">
            </div>
            <div style="width: 100%;">
                <div class="adress_box1">{{dataList.spname}}</div>
                <div style="margin-left: 20px;color: #FF0000;">￥{{dataList.price}}</div>
            </div>
            <van-stepper v-model="value" theme="round" button-size="22" disable-input @change="onChange" class="bjq">
            </van-stepper>
        </div>
        <div style="height: 300px;width: 100%;"></div>
        <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
    </div>
</body>
<script type="module">
    import ajax from "../public/js/api/api.js";
    var app = new Vue({
        el: '#app',
        data: {
            index: 0,
            text: '',
            datalist: {},//收货地址
            sizeId: "",
            dataList: {},//商品信息
            value: "",
            price: "",
            account: {},
            imgList: [],
            show:false,
            username:'',
            tel:'',
            site:''
        },
        created() {
            this.fun9();
            this.findByCommodity(this.GetRequest().id);
            this.findAccount2();
            setTimeout(() => {
                this.findById();
            }, 200);
        },
        methods: {
            zf(){
                if (this.username == "" || this.tel == "" || this.site == "") {
                    alert("请输入完整")
                    return;
                }
                if (this.accountId == "") {
                    ajax
                        .addSite({
                            username: this.username,
                            tel: this.tel,
                            site: this.site,
                        })
                        .then((res) => {
                            if (res.data.code == 0) {
                                // console.log(123);
                                //添加成功返回上一页面
                                // setTimeout(() => {
                                //     history.go(-1);
                                // }, 200);
                                // window.onpageshow = function (e) {
                                //     if (e.persisted) {
                                //         window.location.reload()
                                //     }
                                // };
                                this.findById();        
                            }
                        })
                } else {
                    ajax
                        .updateSite({
                            // accountId: this.accountId,
                            username: this.username,
                            tel: this.tel,
                            site: this.site,
                        })
                        .then((res) => {
                            if (res.data.code == 0) {
                                // setTimeout(() => {
                                //     history.go(-1);
                                // }, 200);
                                // window.location.href = `./qrdd.html?id=${this.id}`; 
                                this.findById();  
                            }
                        })
                }
            },
            findById() {
                ajax
                    .findById({
                        accountId: this.account.id
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.datalist = res.data.data;
                            console.log(res.data.data);
                            this.sizeId = res.data.data.id;
                        }
                    })
            },
            onChange() {
                console.log(123);
                this.price = this.value * this.dataList.price * 100
            },
            /**
             * 查询当前选中商品
             */
            findByCommodity(id) {
                ajax
                    .findCommodityById({
                        id: id
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.dataList = res.data.data
                            this.imgList = res.data.data.spimage.split(",");
                            this.price = res.data.data.price * 100
                        }
                        // console.log(this.imgList, "----商品---");
                    })
            },
            findAccount2: function () {
                ajax
                    .findAccount2()
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.account = res.data.data
                        }
                    })
            },
            fun9: function () {
                ajax
                    .zhifu({
                        url: window.location.href.split("#")[0],
                    })
                    .then((res) => {
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                            signature: res.data.data.signature, // 必填，签名
                            jsApiList: ["chooseWXPay", 'updateTimelineShareData', 'updateAppMessageShareData'], // 必填，需要使用的JS接口列表
                        });
                    });
            },
            onSubmit: function () {
                // //支付
                ajax.getPay({
                    id: this.dataList.id,
                    SPName: this.dataList.spname,
                    SPImage: this.dataList.spimage,
                    number: this.value,
                    username: this.datalist.username,
                    tel: this.datalist.tel,
                    site: this.datalist.site,
                    PayMoney: this.price,
                    SPParticulars: this.dataList.spparticulars,
                    accountId: this.account.id,
                    price: this.dataList.price,
                    type: 2

                }).then(
                    (res) => {
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                            "appId": res.data.data.appId,     //公众号ID，由商户传入
                            "timeStamp": res.data.data.timeStamp,         //时间戳，自1970年以来的秒数
                            "nonceStr": res.data.data.nonceStr, //随机串
                            "package": res.data.data.package,
                            "signType": res.data.data.signType,         //微信签名方式：
                            "paySign": res.data.data.paySign //微信签名
                        },
                            function (res) {
                                console.log(88);
                                if (res.err_msg === "get_brand_wcpay_request:ok") {
                                    window.location.href = `./store.html`;
                                    // console.log("支付成功")
                                    //抽取卡片
                                    // that.sex = sex
                                    // that.start()
                                    setTimeout(() => {
                                        // that.start()
                                    }, 100)
                                    setTimeout(() => {
                                        // that.getCard(sex);
                                        // that.sex = null;
                                        // that.rotate = false;
                                    }, 4800)
                                }
                            }
                        );
                    },
                )
            },
            // 获取路径后携带的参数
            GetRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(
                            strs[i].split("=")[1]
                        );
                    }
                }
                return theRequest;
            },
            router() {
                // window.location.href = `./shdz.html?id=${this.sizeId}`;
                this.show = true
            },
        }
    })
</script>

</html>